<template>
  <div class="arrowsWrap">
    <span class="circle"></span>
    <span class="line"></span>
    <span class="triangle"></span>
    <span class="slot">
      <slot></slot>
    </span>
  </div>
</template>

<script setup name="arrows"></script>

<style lang="less" scoped>
  @green: rgba(7, 191, 168, 1);
  .arrowsWrap {
    width: 10px;
    height: 84px;
    position: relative;
    .slot {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
  }
  .circle {
    position: absolute;
    left: 50%;
    transform: translate(-50%, 0);
    top: 0;
    height: 8px;
    width: 8px;
    border-radius: 50%;
    border: 2px solid @green;
    background-color: #fff;
  }
  .line {
    position: absolute;
    left: 50%;
    transform: translate(-50%, 0);
    top: 8px;
    width: 2px;
    height: 70px;
    background-color: @green;
  }
  .triangle {
    position: absolute;
    left: 50%;
    transform: translate(-50%, 0);
    top: 78px;
    width: 0;
    height: 0;
    border: 6px solid transparent;
    border-top-color: @green;
  }
</style>
